<template>
  <div class="user">
    <!-- 1. 合同查看 -->
    <el-card>
      <div class="hetong1">写法一：<span>签约合同内容：</span><el-button type="primary" size="small" @click="look1">查看合同</el-button></div>
      <div class="hetong2">写法二：<span>签约合同内容：</span><el-button type="primary" size="small" @click="look2">查看合同</el-button></div>
    </el-card>
    <el-card class="card2">
      <span>写法一为单页显示，写法二为多页显示</span>
    </el-card>
    <VuePdf ref="myPdf" />
  </div>
</template>

<script>
import VuePdf from './VuePdf.vue'

export default {
  name: 'FirstProjectContract',
  data() {
    return {}
  },
  components: {
    VuePdf
  },
  methods: {
    /**
     * 查看合同
     */
    look1() {
      this.$refs.myPdf.flag = false
      this.$refs.myPdf.dialogVisible = true
    },
    look2() {
      this.$refs.myPdf.flag = true
      this.$refs.myPdf.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  height: 100%;
  margin: 10px;
}
.hetong1 {
  margin-left: 45%;
}
.hetong2 {
  margin-left: 45%;
  margin-top: 50px;
}
.card2 {
  margin-top: 100px;
  span {
    margin-left: 45%;
  }
}
</style>
